<template>
  <div class="container">
    <div class="item" v-for="item in items" :key="item.id">
        <img :src="item.img" alt="">
        <div class="title">{{ item.title }}</div>
        <div class="price">{{ item.price }}</div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
//  const items = 从后端发回来的数据
    const items = reactive([
        {
            id: '1',
            img:'https://img13.360buyimg.com/jdcms/s230x230_jfs/t1/196754/17/47169/221076/66f65b2aFff791143/a790c83f97770231.jpg',
            title: '索尼（SONY）WH-CH520 ',
            price: '￥349.00'   
        },
        {
            id: '2',
            img:'https://img13.360buyimg.com/jdcms/s230x230_jfs/t1/197/29/25255/41295/66c7e7bfF0024b571/1ffbdbe38e5bfffc.jpg',
            title: '京东E卡',
            price: '￥200.00'   
        },
        {
            id: '1',
            img:'https://img12.360buyimg.com/jdcms/s230x230_jfs/t1/45788/26/28024/90880/66cd30f0F7060bfa5/441c6228c3b6d4a6.png',
            title: '奔富澳洲进口红酒',
            price: '￥1350.00'   
        },
    ])
</script>

<style>
.container {
    width: 800px;
    height: 500px;
    display: flex;
}
.item {
    width:240px;
    margin-left: 20px;
}
img {
    width:240px;
    height: 240px;
}
.title {
    height: 48px;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    color: #666;
}
.price {
    display: inline-block;
    font-size: 16px;
    line-height: 18px;
    height: 18px;
    color: #e1251b;
}
</style>